<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/js/plugins/echars/echarts.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script>
</head>
<body>
<center><div id="weatherMax" style="width: 900px;height:600px;">

</div>
</center>

<script type="text/javascript">

    $(function () {
        $.get("/indexController/weekWeather",function (result) {
            var myChart = echarts.init(document.getElementById('weatherMax'));
            var data = result.data;
            console.log(data);
            var day1 = []; // 日期
            var day2 = []; // 星期
            var wea = [];  // 天气情况
            var tem1 = []; // 最高气温
            var tem2 = []; //最低气温
            for (let i = 0; i < data.length; i++) {
                day2[i]= data[i].week;
                day1[i]= data[i].day.substring(0,3);
                wea[i] = data[i].wea;
                tem1[i] = data[i].tem1;
                tem2[i] = data[i].tem2;
            }
            console.log(wea + "天气情况")
            console.log(tem1 + "最高")
            console.log(tem2 + "最低")
            var option = {
                grid: {
                    show: true,
                    backgroundColor: 'transparent',
                    opacity: 0.3,
                    borderWidth: '0',
                    top: '180',
                    bottom: '0'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    show: false
                },
                xAxis: [
                    // 日期
                    {
                        type: 'category',
                        boundaryGap: false,
                        position: 'top',
                        offset: 130,
                        zlevel: 100,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0,
                            formatter: [
                                '{a|{value}}'
                            ].join('\n'),
                            rich: {
                                a: {
                                    // color: 'white',
                                    fontSize: 18
                                }
                            }
                        },
                        nameTextStyle: {

                        },
                        data: day1
                    },
                    // 星期
                    {
                        type: 'category',
                        boundaryGap: false,
                        position: 'top',
                        offset: 110,
                        zlevel: 100,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0,
                            formatter: [
                                '{a|{value}}'
                            ].join('\n'),
                            rich: {
                                a: {
                                    // color: 'white',
                                    fontSize: 14
                                }
                            }
                        },
                        nameTextStyle: {
                            fontWeight: 'bold',
                            fontSize: 19
                        },
                        data: day2
                    },
                    // 天气图标
                    {
                        type: 'category',
                        boundaryGap: false,
                        position: 'top',
                        offset: 20,
                        zlevel: 100,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0,
                            formatter: function(value, index) {
                                return '{' + index + '| }\n{b|' + value + '}'
                            },
                            rich: {
                                0: {
                                    backgroundColor: {
                                        // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[0]] + '.png')
                                        image: 'https://d.scggqx.com/forecast/img/小雨.png'
                                    },
                                    height: 40,
                                    width: 40
                                },
                                1: {
                                    backgroundColor: {
                                        // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[1]] + '.png')
                                        image: 'https://d.scggqx.com/forecast/img/小雨.png'
                                    },
                                    height: 40,
                                    width: 40
                                },
                                2: {
                                    backgroundColor: {
                                        // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[2]] + '.png')
                                        image: 'https://d.scggqx.com/forecast/img/阴.png'
                                    },
                                    height: 40,
                                    width: 40
                                },
                                3: {
                                    backgroundColor: {
                                        // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[3]] + '.png')
                                        image: 'https://d.scggqx.com/forecast/img/小雨.png'
                                    },
                                    height: 40,
                                    width: 40
                                },
                                4: {
                                    backgroundColor: {
                                        // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[4]] + '.png')
                                        image: 'https://d.scggqx.com/forecast/img/多云.png'
                                    },
                                    height: 40,
                                    width: 40
                                },
                                5: {
                                    backgroundColor: {
                                        // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[5]] + '.png')
                                        image: 'https://d.scggqx.com/forecast/img/小雨.png'
                                    },
                                    height: 40,
                                    width: 40
                                },
                                6: {
                                    backgroundColor: {
                                        // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[6]] + '.png')
                                        image: 'https://d.scggqx.com/forecast/img/小雨.png'
                                    },
                                    height: 40,
                                    width: 40
                                },
                                b: {
                                    // color: 'white',
                                    fontSize: 12,
                                    lineHeight: 30,
                                    height: 20
                                }
                            }
                        },
                        nameTextStyle: {
                            fontWeight: 'bold',
                            fontSize: 19
                        },
                        // data: this.weatherdata.weather
                        data: wea
                    }
                ],
                yAxis: {
                    type: 'value',
                    show: false,
                    axisLabel: {
                        formatter: '{value} °C',
                        color: 'white'
                    }
                },
                series: [
                    {
                        name: '最高气温',
                        type: 'line',
                        data: tem1,
                        symbol: 'emptyCircle',
                        symbolSize: 10,
                        showSymbol: true,
                        smooth: true,
                        itemStyle: {
                            normal: {
                                color: '#C95843'
                            }
                        },
                        label: {
                            show: true,
                            position: 'top',
                            // color: 'white',
                            formatter: '{c} °C'
                        },
                        lineStyle: {
                            width: 1,
                            // color: 'white'
                        },
                        areaStyle: {
                            opacity: 1,
                            color: 'transparent'
                        }
                    },
                    {
                        name: '最低气温',
                        type: 'line',
                        data: tem2,
                        symbol: 'emptyCircle',
                        symbolSize: 10,
                        showSymbol: true,
                        smooth: true,
                        itemStyle: {
                            normal: {
                                color: 'blue'
                            }
                        },
                        label: {
                            show: true,
                            position: 'bottom',
                            // color: 'white',
                            formatter: '{c} °C'
                        },
                        lineStyle: {
                            width: 1,
                            // color: 'white'
                        },
                        areaStyle: {
                            opacity: 1,
                            color: 'transparent'
                        }
                    }
                ]
            }

            myChart.setOption(option)
        })
    })

</script>
</body>
</html>